body {
  margin : 0;
  padding : 0;
  color : #000;
  font-size : 13px;
  font-family : arial,tahoma,helvetica,sans-serif;
}
#af-header {
  padding : 4px 10px;
  height : 81px;
  color : #fff;
  background : #AAAAAA url(./background.gif) repeat-x scroll 0px 0px;
}

#af-header #af-header-icon {
  background-image : url(../images/mycocktail-logo.gif);
  width : 360px;
  height : 71px;
  float : left;
  margin : 2px;
}

#af-header #af-title {
  color: #DDDDDD;
  font-size : 18px;
  font-weight : bold;
  font-family : "Century Gothic",Verdana,Arial,Helvetica,sans-serif;
  float : left;
}

#af-header #af-menubar {
  margin-top : 4px;
  float : right;
}

#af-status {

}

.af-dlg .af-dlg-form,
.af-dlg .af-dlg-desc {
  margin : 10px;
}
.af-dlg .af-dlg-grid {
  margin : 10px;
  position : relative;
  border: 1px solid rgb(153, 187, 232);
  width : 560px;
  height : 280px;
}

.af-library .x-tree-node-collapsed .af-library-pack,
.af-library .x-tree-node-expanded .af-library-pack {
  background-image : url(../icons/mashupbuilder/package.png)
}

.af-library .x-tree-node-leaf .af-library-uaction,
.x-dd-drag-ghost .x-tree-node-leaf .af-library-uaction {
  background-image : url(../icons/mashupbuilder/cog.png)
}

.af-library .x-layout-panel-south {
  background-color : #fff;
}

.af-params {
  border : 1px solid #fff;
}
.af-actions {
  margin : 0px;
  padding : 0px;
}
.af-actions .x-layout-panel-center .x-layout-panel-body {
  background : transparent url(editor-back.png);
}
.af-output {
  border : 1px solid #fff;
}
.af-panel-dragover {
  border : 1px solid #55f;
}
.af-action-input-wrap {
  border : 1px solid #eef;
  overflow : hidden;
}
.af-action-input {
  margin : 0px 0px;
  padding : 5px 20px;
}
.af-action-output-wrap {
  margin-top : 5px;
  border : 1px solid #aaf;
  background : #eef none;
}
.af-action-output {
  margin : 0px;
  padding : 0px;
  overflow : auto;
}
.af-action-output-tree { 
  padding : 2px 20px 5px 20px;
}
.af-action-output-loading {
  text-align : center;
  color : '#fff';
  background-color : #fcc;
}
.af-actionfield {
  margin : 5px 0px; 
}
.af-actionfield-bind-dragover {
  background : #faa none;
}
.af-actionfield .x-form-element .af-actionfield-delete-btn {
  border-width:0px;
  float:left;
  width:20px;
  height:16px;
  background : transparent url(../icons/mashupbuilder/cross.png) no-repeat;
}
.af-actionfield .af-actionfield-delete {
  visibility : hidden;
}
.x-layout-panel-center .x-layout-panel-body {
}
.x-layout-panel-south{
	background:#C3DAF9;
	border:0px none;
	border-top:1px solid #ddecfe;
}

.af-wgt-proxy {
	background-image: url(../extjs/resources/images/default/gradient-bg.gif);
	background-color:#c3daf9;
	border:1px solid #6593cf;
	z-index:10001;
	overflow:hidden;
	position:absolute;
	left:0;top:0;
}
.af-wgt-focus{
	-moz-outline:0 none;
	outline:0 none;
	width:0;
	height:0;
	overflow:hidden;
}

.af-wgt{
  margin : 0px auto;
  width : 600px;
}
.af-wgt .af-wgt-wgt-head {
	cursor:move;
	background: url(../extjs/resources/images/default/basic-dialog/hd-sprite.gif) repeat-x 0 -82px;
	background-color:navy;
	color:#FFF;
	font:bold 12px "sans serif", tahoma, verdana, helvetica;
	overflow:hidden;
	padding:5px;
  white-space: nowrap;
}
.af-wgt .af-wgt-hd {
  float : left;
}
.af-wgt .af-wgt-hd-left {
	background: url(../extjs/resources/images/default/basic-dialog/hd-sprite.gif) no-repeat 0 -41px;
	padding-left:3px;
	margin:0;
}
.af-wgt .af-wgt-hd-right {
	background: url(../extjs/resources/images/default/basic-dialog/hd-sprite.gif) no-repeat right 0;
	padding-right:3px;
}
.af-wgt .af-wgt-wgt-body{
	background:url(../extjs/resources/images/default/layout/gradient-bg.gif);
	border:1px solid #6593cf;
	border-top:0 none;
	padding:10px;
	overflow:hidden;
}
.af-wgt .af-wgt-bd{
	overflow:hidden;
}
.af-wgt .af-wgt-ft{
	overflow:hidden;
	padding:5px;
	padding-bottom:0;
}

.af-wgt-draggable .af-wgt-hd{
}
.af-wgt-closable .af-wgt-hd{
	padding-right:22px;
}
.af-wgt-toolbox {
  float : right;
  width:40px;
  cursor:default;
  height:15px;
  background:transparent;
}
.af-wgt .af-wgt-close, .af-wgt .af-wgt-collapse {
  float:right;
  height:15px;
	width:15px;
	margin:0;
  margin-left:2px;
  padding:0;
	line-height:1px;
	font-size:1px;
	background-repeat:no-repeat;
	cursor:pointer;
	visibility:inherit;
}
.af-wgt .af-wgt-close {
  background-image:url(../extjs/resources/images/default/basic-dialog/close.gif);
}
.af-wgt .af-wgt-collapse {
  background-image:url(../extjs/resources/images/default/basic-dialog/collapse.gif);
}
.af-wgt-collapsed .af-wgt-collapse {
  background-image:url(../extjs/resources/images/default/basic-dialog/expand.gif);
}
.af-wgt-collapsed .af-wgt-wgt-body {
  display : none;
}
.af-wgt .af-wgt-close-over, .af-wgt .af-wgt-collapse-over {
    
}
.af-wgt-margin {
  margin : 0px auto;
  padding : 0px;
  width : 600px;
  border : 1px solid #ffffff;
}
.af-wgt-margin .af-wgt-margin-line {
  margin : 15px 0px;
  padding : 0px;
  width : 100%;
  height : 5px;
  font-size : 1px;
}
.af-wgt-margin-dragover .af-wgt-margin-line {
  background-color : #000000;
}

.footer-panel {
  text-align: right;
  font-weight: bold;
  color: #15428B;
  padding:5px 3px 4px 0px;
}

.af-refresh-btn .x-btn-text {
  background-image : url(../icons/mashupbuilder/arrow_refresh.png)
}
.af-add-btn .x-btn-text {
  background-image : url(../icons/mashupbuilder/add.png)
}
.af-open-inner-proc-btn .x-btn-text {
  background-image : url(../icons/mashupbuilder/application_cascade.png)
}
.af-new-btn .x-btn-text {
  background-image : url(../icons/mashupbuilder/page.png)
}
.af-open-btn .x-btn-text {
  background-image : url(../icons/mashupbuilder/folder.png)
}
.af-save-btn .x-btn-text {
  background-image : url(../icons/mashupbuilder/disk.png)
}
.af-load-btn .x-btn-text {
  background-image : url(../icons/mashupbuilder/package_add.png)
}
.af-discard-btn .x-btn-text {
  background-image : url(../icons/mashupbuilder/cross.png)
}
.af-publish-btn .x-btn-text {
  background-image : url(../icons/mashupbuilder/world_go.png)
}
.af-run-btn .x-btn-text {
  background-image : url(../icons/mashupbuilder/script_go.png)
}
.af-html-btn .x-btn-text {
  background-image : url(../icons/mashupbuilder/html.png)
}
.af-js-btn .x-menu-item-icon {
  background-image : url(../icons/mashupbuilder/script_code_red.png)
}
.af-gadget-btn .x-menu-item-icon {
  background-image : url(../icons/mashupbuilder/image.png)
}
.af-google-btn .x-menu-item-icon {
  background-image : url(http://www.google.com/favicon.ico)
}
.af-netvibes-btn .x-menu-item-icon {
  background-image : url(http://www.netvibes.com/favicon.ico)
}
.af-align-btn .x-btn-text {
  background-image : url(../icons/mashupbuilder/text_align_justify.png)
}
.af-align-left-btn .x-menu-item-icon {
  background-image : url(../icons/mashupbuilder/text_align_left.png)
}
.af-align-center-btn .x-menu-item-icon {
  background-image : url(../icons/mashupbuilder/text_align_center.png)
}
.af-align-right-btn .x-menu-item-icon {
  background-image : url(../icons/mashupbuilder/text_align_right.png)
}
.af-layout-btn .x-btn-text {
  background-image : url(../icons/mashupbuilder/layout.png)
}
.af-width-btn .x-btn-text {
  background-image : url(../icons/mashupbuilder/shape_handles.png)
}
.af-mashup-btn .x-btn-text {
  background-image : url(../icons/mashupbuilder/chart_pie.png)
}
.af-new-mashup-btn .x-btn-text {
  background-image : url(../icons/mashupbuilder/map_add.png)
}
.af-theme-btn .x-btn-text {
  background-image : url(../icons/mashupbuilder/color_swatch.png)
}
.af-layout-add-btn .x-btn-text {
  background-image : url(../icons/mashupbuilder/layout_add.png)
}
.af-layout-remove-btn .x-btn-text {
  background-image : url(../icons/mashupbuilder/layout_delete.png)
}
.af-theme-blue1-btn .x-menu-item-icon {
  background-image : url(../icons/editor/blue1_preview.png)
}
.af-theme-blue2-btn .x-menu-item-icon {
  background-image : url(../icons/editor/blue2_preview.png)
}
.af-theme-blue3-btn .x-menu-item-icon {
  background-image : url(../icons/editor/blue3_preview.png)
}
.af-theme-blue4-btn .x-menu-item-icon {
  background-image : url(../icons/editor/blue4_preview.png)
}
.af-theme-blue5-btn .x-menu-item-icon {
  background-image : url(../icons/editor/blue5_preview.png)
}
.af-theme-bluegrey-btn .x-menu-item-icon {
  background-image : url(../icons/editor/bluegrey_preview.png)
}
.af-theme-green1-btn .x-menu-item-icon {
  background-image : url(../icons/editor/green1_preview.png)
}
.af-theme-green2-btn .x-menu-item-icon {
  background-image : url(../icons/editor/green2_preview.png)
}
.af-theme-green3-btn .x-menu-item-icon {
  background-image : url(../icons/editor/green3_preview.png)
}
.af-theme-green4-btn .x-menu-item-icon {
  background-image : url(../icons/editor/green4_preview.png)
}
.af-theme-green5-btn .x-menu-item-icon {
  background-image : url(../icons/editor/green5_preview.png)
}
.af-theme-grey-btn .x-menu-item-icon {
  background-image : url(../icons/editor/grey_preview.png)
}
.af-theme-orange1-btn .x-menu-item-icon {
  background-image : url(../icons/editor/orange1_preview.png)
}
.af-theme-orange2-btn .x-menu-item-icon {
  background-image : url(../icons/editor/orange2_preview.png)
}
.af-theme-pink-btn .x-menu-item-icon {
  background-image : url(../icons/editor/pink_preview.png)
}
.af-theme-red1-btn .x-menu-item-icon {
  background-image : url(../icons/editor/red1_preview.png)
}
.af-theme-red2-btn .x-menu-item-icon {
  background-image : url(../icons/editor/red2_preview.png)
}
.af-theme-eu-btn .x-menu-item-icon {
  background-image : url(../icons/editor/eu_preview.png)
}

.layout-1x2 {
  background-image: url(../images/editor/1x2.png);
}
.layout-2x1 {
  background-image: url(../images/editor/2x1.png);
}
.layout-1x2-1x1 {
  background-image: url(../images/editor/1x2-1x1.png);
}
.layout-1x1 {
  background-image: url(../images/editor/1x1.png);
}
.layout-1x3 {
  background-image: url(../images/editor/1x3.png);
}
.layout-2x2 {
  background-image: url(../images/editor/2x2.png);
}
.layout-1x3-1x1 {
  background-image: url(../images/editor/1x3-1x1.png);
}
.layout-1x3-1x2 {
  background-image: url(../images/editor/1x3-1x2.png);
}
.layout-2x3 {
  background-image: url(../images/editor/2x3.png);
}

.basic, #animated {
    border:1px solid #c3daf9;
    color:#1e4e8f;
    font:bold 14px tahoma,verdana,helvetica;
    text-align:center;
    padding-top:20px;
}
#snap {
    border:1px solid #c3daf9;
    overflow:hidden;
}
#custom {
    cursor:move;
}
#custom-rzwrap{
    z-index: 100;
}
#custom-rzwrap .x-resizable-handle{
    width:11px;
    height:11px;
    background:transparent url(../../resources/images/sizer/square.gif) no-repeat;
    margin:0px;
}
#custom-rzwrap .x-resizable-handle-east, #custom-rzwrap .x-resizable-handle-west{
    top:45%;
}
#custom-rzwrap .x-resizable-handle-north, #custom-rzwrap .x-resizable-handle-south{
    left:45%;
}



#all-demos {

}
#all-demos dd {
    float:left;
    width:300px;
    height:100px;
    margin:5px 5px 5px 10px;
    cursor:pointer;
    zoom:1;
}
#all-demos dd img {
    width:90px;
    height:90px;
    margin:5px 0 0 5px;
    float:left;
}

#all-demos dd div {
    float:left;
    width:160px;
    margin-left:10px;
}

#all-demos dd h4 {
    font-family:tahoma,arial,san-serif;
    color:#555;
    font-size:11px;
    font-weight:bold;
}
#all-demos dd p {
    color:#777;
}
#all-demos dd.over {
    background: #F5FDE3 url(shared/extjs/images/sample-over.gif) no-repeat;
}
#loading-mask{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:20000;
    background-color:white;
}
#loading{
    position:absolute;
    left:45%;
    top:40%;
    padding:2px;
    z-index:20001;
    height:auto;
}
#loading a {
    color:#225588;
}
#loading .loading-indicator{
    background:white;
    color:#444;
    font:bold 13px tahoma,arial,helvetica;
    padding:10px;
    margin:0;
    height:auto;
}
#loading-msg {
    font: normal 10px arial,tahoma,sans-serif;
}

#all-demos .x-panel-body {
    background-color:#fff;
    border:1px solid;
    border-color:#fafafa #fafafa #fafafa #fafafa;
}
#sample-ct {
    border:1px solid;
    border-color:#dadada #ebebeb #ebebeb #dadada;
    padding:2px;
}

#all-demos h2 {
    border-bottom: 2px solid #99bbe8;
    cursor:pointer;
    padding-top:6px;
}
#all-demos h2 div {
    background:transparent url(../resources/images/default/grid/group-expand-sprite.gif) no-repeat 3px -47px;
    padding:4px 4px 4px 17px;
    color:#3764a0;
    font:bold 11px tahoma, arial, helvetica, sans-serif;
}
#all-demos .collapsed h2 div {
    background-position: 3px 3px;
}
#all-demos .collapsed dl {
    display:none;
}
.x-window {
    text-align:left;
}

.border {
  border:1px solid #696969;
}
.title-mashup{
}
.delete-mashup{
  padding: 1px;
  float:right;
  cursor: pointer;
}
.refresh-mashup{
  padding: 1px;
  float:right;
  cursor: pointer;
}
.input-mashup-title{
  float:left;
}
.edit-mashup-title{
  float:left;
  cursor: pointer;
  padding: 1px;
}
